﻿@model WineStore.DAL.ShoppingCartViewModel
@using WineStore.Extends;
@{
    ViewBag.Title = "Shopping Cart";
    Layout = "~/Views/Shared/HomeLayout.cshtml";
}
<style type="text/css">
    table {
        margin: 5px auto;
        width: 920px;
        color: Black;
        border-spacing: 0px;
    }

        table tr {
            border-bottom: 1px solid red;
        }

    td {
        padding: 5px;
        text-align: center;
        vertical-align: top;
        border-bottom: 1px solid #EEEEEE;
    }

    th {
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        padding: 5px;
        color: #333;
        border-bottom: 1px solid #EEEEEE;
    }

    .contenttd {
        padding-top: 40px;
    }

    .total-price {
        padding-top: 40px;
    }

    .RefreshQuantity {
        line-height: 27px;
        margin-left: 5px;
        padding: 5px 0px;
    }
</style>
<script src="../../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler 
        $(".RemoveLink").click(function () {
            if (confirm("Are you sure delete " + $(this).attr("data-name") + " ?")) {
                // Get the id from the link 
                var recordToDelete = $(this).attr("data-id");
                if (recordToDelete != '') {
                    clearUpdateMessage();
                    // Perform the ajax post 
                    $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
            function (data) {
                // Successful requests get here 
                // Update the page elements 
                //--if (data.ItemCount == 0) {
                $('#row-' + data.DeleteId).fadeOut('slow');
                //--} else {
                //--    $('#item-count-' + data.DeleteId).text(data.ItemCount);
                //--}
                $('#totalcartitems').text('Cart:( ' + data.TotalCartItems + ' )');
                $('#cart-total').text(data.CartTotal);
                $('#update-message').text(htmlDecode(data.Message));
                $('#cart-status').text('Cart (' + data.CartCount + ')');
            });

                }
            }
        });

        $(".RefreshQuantity").click(function () {
            // Get the id from the link 
            var recordToUpdate = $(this).attr("data-id");

            //Set quantity number to 0 if input value is empty
            var countToUpdate = 0;
            if ($("#" + $(this).attr("txt-id")).val().trim() !== '') {
                countToUpdate = $("#" + $(this).attr("txt-id")).val();
            }

            if (recordToUpdate != '') {
                // Perform the ajax post 
                $.post("/ShoppingCart/UpdateCartCount", { "id": recordToUpdate, "cartCount": countToUpdate },
                function (data) {
                    // Successful requests get here 
                    // Update the page elements                        
                    if (data.ItemCount == 0) {
                        $('#row-' + data.DeleteId).fadeOut('slow');
                    }
                    $('#update-message').text(htmlDecode(data.Message));

                    //Only process the callback data when no server error occurs
                    if (data.ItemCount != -1) {
                        $('#totalcartitems').text('Cart:( ' + data.TotalCartItems + ' )');
                        $('#total-price-' + data.DeleteId).text(data.TotalPrice);
                        $('#cart-total').text(data.CartTotal);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    }
                });
            }
        });

        $(".EmptyCart").click(function () {
            if (confirm("Are you sure delete?")) {
                clearUpdateMessage();
                // Perform the ajax post 
                $.post("/ShoppingCart/EmptyCart",
            function (data) {
                // Successful requests get here 
                // Update the page elements 
                //--if (data.ItemCount == 0) {
                $('#yourcart').fadeOut('slow');
                $('#totalcartitems').text('Cart:( ' + data.TotalCartItems + ' )');
                $('#update-message').text(htmlDecode(data.Message));
            });
            }
        });
    });


    function clearUpdateMessage() {
        //Reset update-message area
        $('#update-message').text('');
    }
    function htmlDecode(value) {
        if (value) {
            return $('<div />').html(value).text();
        }
        else {
            return '';
        }
    }

    if (typeof String.prototype.trim !== 'function') {
        String.prototype.trim = function () {
            return this.replace(/^\s+|\s+$/g, '');
        }
    }
</script>

<!--Sử dụng cho row hover-->
<script type="text/javascript">
    $(document).ready(function () {
        $("tr").not(':first').hover(function () {
            $(this).css("background", "#F0FFFF");
        }, function () {
            $(this).css("background", "");
        }
        );
    });
</script>

@if (Request.Cookies["language"].Value == "EN")
{


    using (Html.BeginForm())
    {
    <h3 class="title">Cart Information</h3>
    <div style="height: 20px;">
        @for (int i = 0; i < Model.CartItems.Count; i++)
        { 
            <p style="color: Red;">
                @Html.ValidationMessageFor(model => model.CartItems[i].Count)
            </p> 
        }
    </div>
    <div style="color: red; height: 20px; position: relative; margin-top: 10px;" id="update-message">
    </div>
    <div id="yourcart">
        <table border="0">
            <tr>
                <th>Image
                </th>
                <th>Product Name
                </th>
                <th>Price
                </th>
                <th>Quantity
                </th>
                <th>Price*Quantity
                </th>
                <th>Remove
                </th>
            </tr>
            @{int ix = 0;}
            @foreach (var item in
Model.CartItems)
            {
                <tr id="row-@item.RecordId">
                    <td>
                        @Html.ImageFor(model => "../../Content/Images/Products/" + item.Product.ProductImage, new { width = "100px", height = "100px;" })
                    </td>
                    <td class="contenttd">
                        @item.Product.ProductName_EN
                    </td>
                    <td class="contenttd" id="price">
                        @((double)item.Product.ProductPrice)
                    </td>
                    <td class="contenttd">
                        @Html.TextBoxFor(model => model.CartItems[ix].Count,
           new
           {
               style = "width:50px; text-align:center;",
               onkeyup = "clearUpdateMessage();",
               onchange = "clearUpdateMessage();"
           })
                        <a href="#" class="RefreshQuantity" style="text-decoration:none;" data-id="@item.RecordId" txt-id="CartItems_@(ix)__Count">Update</a>
                    </td>
                    <td id="total-price-@item.RecordId" class="total-price">
                        @((double)item.Product.ProductPrice * Model.CartItems[ix].Count)
                    </td>
                    <td class="contenttd">
                        <a href="#" class="RemoveLink" data-id="@item.RecordId" data-name="@item.Product.ProductName_EN" txt-id="CartItems_@(ix)__Count">Remove</a>
                    </td>
                </tr>
                ix++;
            }
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="cart-total" style="font-size: 15px; font-weight: bold; width: 200px; color: #333;">Total: @((double)Model.CartTotal)
                </td>
                <td style="">

                    <a href="#" class="EmptyCart">Remove All</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>@Html.ActionLink("Continue Shopping", "Products", "Home")</td>
                <td style="">
                    @Html.ActionLink("Checkout", "AddressAndPayment", "Checkout", new { identityName=@User.Identity.Name}, null)&nbsp;&nbsp;&nbsp;
                        
                </td>
            </tr>
        </table>
    </div>
    
    }
}
else
{

    using (Html.BeginForm())
    {
    <h3 class="title">Einkaufswagen Information</h3>
    <div style="height: 20px;">
        @for (int i = 0; i < Model.CartItems.Count; i++)
        { 
            <p style="color: Red;">
                @Html.ValidationMessageFor(model => model.CartItems[i].Count)
            </p> 
        }
    </div>
    <div style="color: red; height: 20px; position: relative; margin-top: 10px;" id="update-message">
    </div>
    <div id="yourcart">
        <table border="0">
            <tr>
                <th>Bild
                </th>
                <th>Produkt Name
                </th>
                <th>Preis
                </th>
                <th>Die Anzahl Der
                </th>
                <th>Preis * Die Anzahl Der
                </th>
                <th>Entfernen
                </th>
            </tr>
            @{int ix = 0;}
            @foreach (var item in
Model.CartItems)
            {
                <tr id="row-@item.RecordId">
                    <td>
                        @Html.ImageFor(model => "../../Content/Images/Products/" + item.Product.ProductImage, new { width = "100px", height = "100px;" })
                    </td>
                    <td class="contenttd">
                        @item.Product.ProductName_EN
                    </td>
                    <td class="contenttd" id="price">
                        @((double)item.Product.ProductPrice)
                    </td>
                    <td class="contenttd">
                        @Html.TextBoxFor(model => model.CartItems[ix].Count,
           new
           {
               style = "width:50px; text-align:center;",
               onkeyup = "clearUpdateMessage();",
               onchange = "clearUpdateMessage();"
           })
                        <a href="#" class="RefreshQuantity" style="text-decoration:none;" data-id="@item.RecordId" txt-id="CartItems_@(ix)__Count">Update</a>
                    </td>
                    <td id="total-price-@item.RecordId" class="total-price">
                        @((double)item.Product.ProductPrice * Model.CartItems[ix].Count)
                    </td>
                    <td class="contenttd">
                        <a href="#" class="RemoveLink" data-id="@item.RecordId" data-name="@item.Product.ProductName_EN" txt-id="CartItems_@(ix)__Count">Entfernen</a>
                    </td>
                </tr>
                ix++;
            }
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="cart-total" style="font-size: 15px; font-weight: bold; width: 200px; color: #333;">Gesamtbetrag: @((double)Model.CartTotal)
                </td>
                <td style="">

                    <a href="#" class="EmptyCart">Alle Entfernen</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>@Html.ActionLink("Weiter Einkaufen", "Products", "Home")</td>
                <td style="">
                    @Html.ActionLink("Kasse", "AddressAndPayment", "Checkout", new { identityName=@User.Identity.Name}, null)&nbsp;&nbsp;&nbsp;
                        
                </td>
            </tr>
        </table>
    </div>
    
    }
}